<template>
  <div class="home-container">
    <!-- 侧边栏 -->
    <div class="side-container">
      <el-menu router menu-trigger="click" :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse">
        <!-- 首页 -->
        <el-menu-item index="/home/index">
          <el-icon><HomeFilled /></el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <!-- 商品管理 -->
        <el-sub-menu index="/home">
          <template #title>
            <el-icon><GoodsFilled /></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/goods/list">
              <el-icon><Operation /></el-icon>
              <span>商品列表</span>
            </el-menu-item>
            <el-menu-item index="/home/cate/list">
              <el-icon><Grid /></el-icon>
              <span>商品分类</span>
            </el-menu-item>
            <el-menu-item index="/home/add/goods">
              <el-icon><CirclePlusFilled /></el-icon>
              <span>添加商品</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <!-- 订单管理 -->
        <el-sub-menu index="/home">
          <template #title>
            <el-icon><List /></el-icon>
            <span title>订单管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/order/list">
              <el-icon><Operation /></el-icon>
              <span>订单列表</span>
            </el-menu-item>
            <el-menu-item index="/home/deal/order">
              <el-icon><Promotion /></el-icon>
              <span>待发货订单</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <!-- 账户管理 -->
        <el-menu-item index="/home/account">
          <el-icon><Coin /></el-icon>
          <template #title>
            <span title>账户管理</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 内容区 -->
    <div class="body-container" v-loading.lock.lock="loading">
      <!-- 底部面包屑 -->
      <div class="breadcrumb">
        <div class="icons" @click="isCollapse = !isCollapse">
          <el-icon v-if="isCollapse"><Expand /></el-icon>
          <el-icon v-else><Fold /></el-icon>
        </div>
        <div class="nav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: firstPath }">{{ firstLevel }}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: secondPath }" v-if="secondLevel !== ''">{{ secondLevel }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="bus-option">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-icon><UserFilled /></el-icon>
              <el-icon><ArrowDown /></el-icon>
            </span>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="退出登录" @click="logout">退出登录</el-dropdown-item>
                <el-dropdown-item command="注销账户" @click="cancelAccount">注销账户</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <!-- 内容展示区 -->
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { UserFilled, ArrowDown, HomeFilled, Operation, GoodsFilled, List, Expand, CirclePlusFilled, Grid, Promotion, Coin, Fold } from '@element-plus/icons-vue'
import axios from '@/utils/request.js'
import { useRouter, useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()

let loading = ref(false)
let secondLevel = ref('')
let firstLevel = ref('')
let defaultActive = ref('/home/index')
let isCollapse = ref(false)
let firstPath = ref('')
let secondPath = ref('')

const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '退出登录', {
    confirmButtonText: '确 定',
    cancelButtonText: '取 消',
    type: 'warning'
  })
    .then(async () => {
      loading.value = true
      try {
        const data = await axios.post('/bus/logout')
        console.log(data)
        if (data.code === 0) {
          // 退出登录成功
          ElMessage({
            type: 'success',
            message: data.msg,
            duration: 1000,
            onClose: () => {
              localStorage.removeItem('bus_token')
              router.replace('/login')
            }
          })
        }
      } catch (err) {
        console.log(err)
        ElMessage.error('请求失败！')
      } finally {
        loading.value = false
      }
    })
    .catch(() => {})
}
const cancelAccount = async () => {
  ElMessageBox.confirm('一旦注销无法恢复，确定要注销账号吗？', '注销账号', {
    confirmButtonText: '确 定',
    cancelButtonText: '取 消',
    type: 'warning'
  })
    .then(async () => {
      loading.value = true
      try {
        // 注销账号
        const data = await axios.post('/bus/cancellation')
        if (data.code === 0) {
          // 退出登录成功
          ElMessage({
            type: 'success',
            message: data.msg,
            duration: 1000,
            onClose: () => {
              localStorage.removeItem('bus_token')
              router.replace('/login')
            }
          })
        }
      } catch (err) {
        ElMessage.error('请求失败！')
      } finally {
        loading.value = false
      }
    })
    .catch(() => {})
}

const setNavRoute = (firstTitle, secondTitle, firstRoute, secondRoute) => {
  firstLevel.value = firstTitle
  secondLevel.value = secondTitle
  firstPath.value = firstRoute
  secondPath.value = secondRoute
}

// 监听路由的变化
watch(
  route,
  () => {
    let path = route.fullPath
    defaultActive.value = path
    const index = route.fullPath.search(/\d/)
    if (index !== -1) {
      path = path.slice(0, index - 1)
    }

    switch (path) {
      case '/home/index':
        setNavRoute('首页', '', '/', '/')
        break
      case '/home/goods/list':
        setNavRoute('商品管理', '商品列表', '/home/goods/list', '/home/goods/list')
        break
      case '/home/cate/list':
        setNavRoute('商品管理', '商品分类', '/home/goods/list', '/home/cate/list')

        break
      case '/home/add/goods':
        setNavRoute('商品管理', '添加商品', '/home/goods/list', '/home/add/goods')
        break
      case '/home/order/list':
        setNavRoute('订单管理', '订单列表', '/home/order/list', '/home/order/list')
        break
      case '/home/deal/order':
        setNavRoute('订单管理', '待处理订单', '/home/order/list', '/home/deal/order')
        break
      case '/home/account':
        setNavRoute('账单管理', '', '/home/account', '/home/account')
        break
      case '/home/edit/goods':
        setNavRoute('商品管理', '商品编辑', '/home/goods/list', '/home/goods/list')
        break
      case '/home/goods/info':
        setNavRoute('商品管理', '商品信息', '/home/goods/list', '/home/goods/info')
        break
      case '/home/add/cate':
        setNavRoute('商品管理', '添加分类', '/home/goods/list', '/home/add/cate')
        break
      case '/home/edit/cate':
        setNavRoute('商品管理', '编辑分类', '/home/goods/list', '/home/edit/cate')
        break
      case '/home/son/cate/list':
        setNavRoute('商品管理', '二级分类', '/home/goods/list', '/home/son/cate/list')
        break
      case '/home/order/info':
        setNavRoute('订单管理', '订单详情', '/home/order/list', '/home/order/info')
        break
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.home-container {
  display: flex;
  min-height: 100vh;

  .side-container {
    background-color: #545c64;

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
  }

  .body-container {
    flex: 1;
    height: 100vh;
    overflow: auto;

    .breadcrumb {
      padding: 10px;
      border-bottom: 2px solid #e1e1e1;
      display: flex;
      align-items: center;
      position: sticky;
      top: 0;
      right: 0;
      z-index: 1999;
      background-color: #fff;

      .icons {
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .icons .el-icon {
        font-size: 20px;
      }
      .nav {
        flex: 1;
      }

      .bus-option {
        .el-icon {
          color: #409eff;
        }
      }
    }
  }
}
</style>
